<template>
  <div class="preview-container">
    <div class="preview-switch-buttons">
      <el-button
        size="small"
        :type="activeName === 'pc' ? 'primary' : ''"
        @click="activeName = 'pc'"
      >
        <el-icon>
          <ele-Monitor />
        </el-icon>
        {{ $t("form.theme.pc") }}
      </el-button>
      <el-button
        size="small"
        :type="activeName === 'mobile' ? 'primary' : ''"
        @click="activeName = 'mobile'"
      >
        <el-icon>
          <ele-Iphone />
        </el-icon>
        {{ $t("form.theme.mobile") }}
      </el-button>
    </div>

    <el-tabs
      v-if="formConfig.formKey"
      type="card"
      class="preview-tabs"
      v-model="activeName"
    >
      <el-tab-pane name="pc">
        <template #label>
          <span style="display: none">
            <el-icon><ele-Monitor /></el-icon>
            {{ $t("form.theme.pc") }}
          </span>
        </template>
        <el-scrollbar
          v-if="activeName == 'pc'"
          style="height: 90vh; overflow-x: hidden !important"
          :class="activeName === 'pc' ? 't-form-theme-wrap' : ''"
        >
          <biz-project-form
            v-if="formConfig.formKey"
            :form-config="formConfig"
            ref="bizProjectFormRef"
            @submit="submitForm"
          />
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane name="mobile">
        <template #label>
          <span style="display: none">
            <el-icon><ele-Iphone /></el-icon>
            {{ $t("form.theme.mobile") }}
          </span>
        </template>
        <div
          class="preview-layer"
          v-if="activeName == 'mobile'"
        >
          <div
            class="preview-phone"
            :class="activeName === 'mobile' ? 't-form-theme-wrap' : ''"
          >
            <div class="phone-content t-form-theme-wrap">
              <biz-project-form
                v-if="formConfig.formKey"
                :form-config="{
                  ...formConfig,
                  isMobile: true
                }"
                ref="mobileBizProjectFormRef"
                @submit="submitForm"
              />
            </div>
          </div>
        </div>
        <div
          v-if="mobilePreviewUrl && previewQrcode"
          class="qrcode-view"
        >
          <p style="font-weight: bold; font-size: 18px">
            {{ $t("form.theme.mobilePreview") }}
          </p>
          <p class="tips-text">
            {{ $t("form.theme.mobilePreviewTips") }}
          </p>
          <p>
            <vue-qr
              v-if="mobilePreviewUrl && previewQrcode"
              :size="134"
              style="border-radius: 10px"
              :text="mobilePreviewUrl"
            />
          </p>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { onMounted, provide, ref } from "vue";
import { useRoute } from "vue-router";
import BizProjectForm from "@/views/formgen/components/BizProjectForm/index.vue";
import VueQr from "vue-qr/src/packages/vue-qr.vue";
import { getBaseUrlPath } from "@/utils/auth";
import { getSettingRequest } from "@/api/project/setting";
import { MessageUtil } from "@/utils/messageUtil";
import { PREVIEW_MODE_KEY, USER_FORM_STATE_KEY } from "@/views/formgen/components/GenerateForm/types/constants";
import { useUserForm } from "@/views/formgen/components/GenerateForm/hooks/useUserForm";
import { FormConfigType, getDefaultFormConfig } from "@/views/formgen/components/GenerateForm/types/form";

defineProps({
  previewQrcode: {
    type: Boolean,
    default: false
  }
});

// Reactive variables
const activeName = ref("pc");
const formKey = ref<string | null>(null);
const mobilePreviewUrl = ref("");
const formConfig = ref<FormConfigType>(getDefaultFormConfig());

// Route handling
const route = useRoute();

onMounted(() => {
  formKey.value = route.query.key as string | null;
  mobilePreviewUrl.value = `${getBaseUrlPath()}/project/form/view?key=${formKey.value}`;
  getSettingRequest(formKey.value as string).then(res => {
    if (res.data) {
      formConfig.value.setting = res.data;
    }
    formConfig.value.formKey = formKey.value || "";
  });
});

const bizProjectFormRef = ref<any>(null);
const mobileBizProjectFormRef = ref<any>(null);

const handleChangeTheme = (theme: string) => {
  bizProjectFormRef.value.formConf.theme = theme;
  mobileBizProjectFormRef.value.formConf.theme = theme;
};

const userFormStore = useUserForm();
const { submitLoading } = userFormStore;

provide(USER_FORM_STATE_KEY, userFormStore);

const submitForm = () => {
  MessageUtil.warning("预览模式下不支持提交数据哦~");
  submitLoading.value = false;
};

provide(PREVIEW_MODE_KEY, true);

defineExpose({
  handleChangeTheme
});
</script>

<style lang="scss" scoped>
.tips-text {
  margin-top: 10px;
  margin-bottom: 10px;
}

.preview-container {
  margin: 0;
  height: 100vh;
  overflow: hidden !important;
  position: relative;
  padding-top: 0 !important;
}

.preview-switch-buttons {
  position: relative;
  top: 24px;
  left: 50%;
  width: 172px;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  padding: 5px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

  .el-button {
    display: flex;
    align-items: center;
    gap: 5px;
  }
}

:deep(.preview-tabs) {
  padding: 0 !important;
  margin: 0 !important;
  height: 100% !important;

  .el-tabs__content {
    height: 100% !important;
  }

  .el-tab-pane {
    height: 100% !important;
  }
}

:deep(.el-tabs--card > .el-tabs__header .el-tabs__nav) {
  border: none;
  border-radius: 6px;
  background-color: white;
}

:deep(.el-tabs__header) {
  width: 220px;
  margin: 0 auto;
  border: none;
  display: none;
}

:deep(.el-tabs--card > .el-tabs__header .el-tabs__item) {
  background-color: transparent;
  border: none;
}

.project-form {
  margin: 20px auto 0;
}

// 手机预览样式优化
div.preview-layer {
  width: 100%;
  height: 100%;
  margin: 50px auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

div.preview-layer .preview-phone {
  width: 390px; // 修改为 iPhone 12/13/14 标准宽度
  height: 744px; // 修改为 iPhone 12/13/14 标准高度
  background: #fff;
  border-radius: 40px;
  position: relative;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  border: 12px solid #333;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 160px; // 稍微调整刘海宽度以适应新尺寸
    height: 24px;
    background: #333;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    z-index: 2;
  }

  .phone-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;

    // 隐藏滚动条但保持可滚动
    &::-webkit-scrollbar {
      width: 0;
      background: transparent;
    }

    :deep(.project-form-wrapper) {
      width: 100%;
      padding: 0px;
      box-sizing: border-box;
    }

    :deep(.submit-btn-form-item button) {
      width: 90%;
      margin: 0 auto;
    }
  }
}

// 二维码视图位置调整
.qrcode-view {
  position: fixed;
  right: 25%;
  top: 50%;
  transform: translateY(-50%);
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  p {
    text-align: center;
    font-size: 12px;
    color: #303133;
    margin: 8px 0;
  }
}

@media screen and (max-width: 1500px) {
  .preview-switch-buttons {
    top: 10px !important;
  }
  .preview-layer {
    margin-top: 40px !important;
  }
  .preview-layer .preview-phone {
    height: 580px !important;
    width: 330px !important;
  }
  .qrcode-view {
    padding: 10px !important;
    right: 10%;
  }
}

.preview-html {
  width: 345px !important;
  height: 568px !important;
  margin: 74px 0 0 0;
  border-radius: 5px;
  outline: none;
  background-color: #fff;
  border-width: 2px;
  border-style: inset;
  border-color: initial;
  border-image: initial;
  border-top-width: 0;
  border-right-width: 0;
  border-bottom-width: 0;
  border-left-width: 0;
}

:deep(.top-login-user) {
  position: sticky;
  top: 5px;
  width: 90%;
  margin: 0 auto;
}
</style>
